import {useNavigate, Routes} from "react-router-dom";
import { TabBar } from 'antd-mobile';
import Moneybox from "../Moneybox";
import Test from "../test";
import Me from "../Me";
import Book from "../Book";
import {
  Route,
  useLocation,
  MemoryRouter as Router,
} from 'react-router-dom'
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
import './root.css';
import { useDispatch} from "react-redux";
import { useEffect } from "react";
import { getBilltype } from "../../store/modules/bookicon";

function Bottom() {
  
  const navigate = useNavigate()
  const location = useLocation()
  const { pathname } = location

  const setRouteActive = (value) => {
    navigate(value)
  }

  const tabs = [
    { key: '/',title: '首页',icon: <AppOutline />},
    { key: '/todo',title: '统计',icon: <UnorderedListOutline />},
    { key: '/book',title: '对话',icon: <MessageOutline />},
    { key: '/personalCenter',title: '我的',icon: <UserOutline />},
  ]

  

  return (
    <TabBar activeKey={pathname} onChange={value => setRouteActive(value)} safeArea={true}>
      {tabs.map(item => (
        <TabBar.Item key={item.key} icon={(item.icon)} title={item.title} activeStyle={{
          color: '#ffd700',
          '--icon-color': '#ffd700'
        }}/>
      ))}
    </TabBar>
  )
}
export default function Root() {
  const dispatch = useDispatch()
  useEffect(()=>{
    dispatch(getBilltype())
    
  },[])
  
    return (
      <div>
          <div className={'app'}>
            
            {/* <div className="top">
            </div> */}
            <div className="body">
              <Routes>
                <Route path='/' element={<Moneybox />}></Route>
                <Route path='/todo' element={<Test />}></Route>
                <Route path='/book' element={<Book />}></Route>
                <Route path='/personalCenter' element={<Me />}></Route>
              </Routes>
            </div>
            
            <div className="bottom">
              <Bottom />
            </div>
          </div>
        
      </div>
    );
  }

  export function Todo() {
    return <div>愿望清单</div>
  }
  
  export function Message() {
    return <div>消息</div>
  }
  
  export function PersonalCenter() {
    return <div>我的1</div>
  }

